<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        .int{ height: 30px; text-align: left; width: 600px; }
        label{ width: 200px; margin-left: 20px; color: #666666;}
        .high{ color: red; }
        .msg{ font-size: 18px; }
        .onError{ color: #666666; background-color: #ffe0e9}
        .onSuccess{ color: #666666; background-color: #e9fbeb}
        div
        {
            margin: 0 auto;
        }
    </style>
</head>
<body>

<form method="post" action="">
    <div class="int">
        <label for="name">&nbsp;&nbsp;用户名：</label>
        <input type="text" id="name" class="required" />
    </div>
    <div class="int">
        <label for="name">&nbsp;&nbsp;&nbsp;&nbsp;邮箱：</label>
        <input type="text" id="email" class="required" />
    </div>
    <div class="int">
        <label for="name">个人资料：</label>
        <input type="text" id="personalInfo"/>
    </div>
    <div class="int">
        <input type="submit" value="提交" id="send" style="margin-left: 108px;margin-right: 10px" />
        <input type="reset" value="重置" id="res" />
    </div>
</form>

<script type="text/javascript">
    //页面加载的时候执行的方法ready（），和load方法一样
    $(document).ready(function(){
        //为表单的必填文本框添加提示信息（）选择form中的所有后代input元素）
        $("form :input.required").each(function(){
            //创建元素
            var $required = $("<strong class='high'>*</strong>");
            //将它追加到文档中
            $(this).parent().append($required);
        });

        $('#name').on('blur',function(){
            if($.trim(this.value) == "" || $.trim(this.value).length < 6){
                var errorMsg = " 请输入至少6位的用户名";
                $(this).next().html("<span class='msg onError'>" + "<img src='1.png' style='width: 15px; height: 15px'>" + errorMsg + "</span>").show();
            }else{
                var okMsg=" 输入正确";
                $(this).next().html("<span class='msg onSuccess'>" + "<img src='2.png' style='width: 15px; height: 15px'>"  + okMsg + "</span>").show();
            }
        });

        $('#email').on('blur',function(){
            var re=/^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
            if(re.test($(this).val())==false){
                var errorMsg = " 请输入正确的E-Mail地址";
                $(this).next().html("<span class='msg onError'>" + "<img src='1.png' style='width: 15px; height: 15px'>" + errorMsg + "</span>").show();
            }else{
                var okMsg=" 输入正确";
                $(this).next().html("<span class='msg onSuccess'>" + "<img src='2.png' style='width: 15px; height: 15px'>"  + okMsg + "</span>").show();
            }
        });

        //点击重置按钮时，触发文本框的失去焦点事件
        $("#send").click(function(){
            //trigger 事件执行完后，浏览器会为submit按钮获得焦点
            $("form .required:input").trigger("blur");
            var numError = $("form .onError").length;
            document.write(numError);
            if(numError){
                return false;
            }
            alert("注册成功，密码已发到你的邮箱，请查收。");
        });
    });
</script>
</body>
</html>
